<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <button @click="updateName">update name</button>
</template>
<script>
import { reactive } from 'vue'
// 需求：在模板中渲染 name 和 age
// 下面的写法有待提高
// 第一：我只希望渲染 name 和 age，你却把整个对象都导出了，性能不好！
// 第二：模板中多次用到了 obj.
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    const updateName = () => {
      // 视图并没有更新
      obj.name = 'xxx'
    }

    return { name: obj.name, age: obj.age, updateName }
  },
}
</script>
